<template>
  <div class="role-page">
    <n-space class="role-container" :vertical="true">
      <n-form label-width="auto" :model="formValue" :disabled="route.query.isView === '1'" ref="formRef">
        
        <n-form-item  label="" path="create_time">
          <n-input v-model:value="formValue.create_time"  placeholder="" />
        </n-form-item>
        
        <n-form-item  label="" path="id">
          <n-input v-model:value="formValue.id"  placeholder="" />
        </n-form-item>
        
        <n-form-item  label="" path="role_name">
          <n-input v-model:value="formValue.role_name"  placeholder="" />
        </n-form-item>
        
        <n-form-item  label="" path="status">
          <n-input v-model:value="formValue.status"  placeholder="" />
        </n-form-item>
        
        <n-form-item  label="" path="update_time">
          <n-input v-model:value="formValue.update_time"  placeholder="" />
        </n-form-item>
        
        <n-form-item>
          <n-button class="form-button" v-if="route.query.isView !== '1'" @click="submit" attr-type="button">保存</n-button>
          <n-button class="form-button" @click="goBack" attr-type="button">返回</n-button>
        </n-form-item>
      </n-form>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from "vue"
import { useRouter, useRoute } from "vue-router"
import { NForm, NFormItem, NInput, NSelect, NButton, NSpace, NDataTable, useMessage } from "naive-ui"

type FormType = "insert" | "edit"

const route = useRoute()
const router = useRouter()
const message = useMessage()
const api = getCurrentInstance()?.appContext.config.globalProperties.$api

const formType = ref<FormType>()

const formRef = ref()
const formValue = ref({
  
  create_time: "",
  
  id: "",
  
  role_name: "",
  
  status: "",
  
  update_time: "",
  
})

const roleList = ref([])

onMounted(async () => {
  if (route.query.id) {
    formType.value = "edit"
    let response: any = await api.queryrole({id: route.query.id}) 
    if (response.data.successful === 1) {
      formValue.value = response.data.data
    }
  }
})

const submit = async () => {
  let response: any = await api.saverole(formRef.value.model)
  if (response.data.successful === 1) {
    message.success("添加成功！")
    goBack()
  }
}

const goBack = () => {
  router.back()
}
</script>

<style lang="less" scoped>
.role-page {
  height: 100%;

  .role-container {
    padding: 40px 30px;
  }

  .form-button:not(:last-child) {
    margin-right: 10px;
  }
}
</style>
